<template>
  <section>
  	<div class="model">
  		<img :src="IMGBASE64.WODEFUDAO2X" class="orange">
  		<span class="title">我的辅导</span>
  		<div class="kong"></div>
  		<template>
  			<el-table :data="tablemsg" @cell-click="showDetails">
    			<!-- <el-table-column prop="num" label="#" align="center"></el-table-column> -->
  				<el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
    			<el-table-column prop="subject" label="辅导课程" align="center"></el-table-column>
          <el-table-column prop="teacherName" label="辅导老师" align="center"></el-table-column>
    			<el-table-column prop="coachTimestr" label="辅导时间" align="center"></el-table-column>
          <el-table-column prop="teacherPhone" label="联系方式" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="coachResult" label="辅导情况" :show-overflow-tooltip='true' align="center"></el-table-column>
  			</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
  		</template>
  	</div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <el-form label-width="80px">
          <el-col :span="24">
            <el-form-item label="姓名">
              <span>{{detailsForm.studentName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅导老师">
              <span>{{detailsForm.teacherName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅导课程">
              <span>{{detailsForm.subject}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系方式">
              <span>{{detailsForm.teacherPhone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开始时间">
              <span>{{detailsForm.coachTimestr}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="辅导情况">
              <span>{{detailsForm.coachResult}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      isSuccess: false,
      isDetails: false,
      tablemsg: [],
      total: 0,
      page: 1,
      paging: true,
      detailsForm: {
        studentName: null,
        subject: null,
        teacherName: null,
        coachTimestr: null,
        teacherPhone: null,
        coachResult: null
      }
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.$http.post(this._httpUrl + 'course/coach/myCoach', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.tablemsg = response.data.data.content
        for (var i in this.tablemsg) {
          console.log(i)
          this.tablemsg[i].num = parseInt(i) + 1
        }
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    detailsShow () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    },
    handleCurrentChange (val) {
      this.page = val
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.xtoken = {'yxt-xtoken': localStorage.xtoken}
      this.$http.post(this._httpUrl + 'course/coach/myCoach', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data)
          this.tablemsg = response.data.data.content
          for (var i in this.tablemsg) {
            console.log(i)
            this.tablemsg[i].num = parseInt(i) + 1
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.studentName = rows.studentName
        this.detailsForm.subject = rows.subject
        this.detailsForm.teacherName = rows.teacherName
        this.detailsForm.coachTimestr = rows.coachTimestr
        this.detailsForm.teacherPhone = rows.teacherPhone
        this.detailsForm.coachResult = rows.coachResult
        this.isDetails = !this.isDetails
        this.isSuccess = !this.isSuccess
      }
    }
  }
}
</script>

<style lang="less" scoped>
	.model{
		width: 98%;
		position: relative;
		background: #FFF;
		margin-left: 1%;
		margin-top: 60px;
		border-radius: 5px;
		padding-top: 10px;
		.orange{
			position: absolute;
			left: 2%;
			top: -25px;
		}
		.title{
			margin-left: 11%;
		}
	}
  .kong{
  	padding: 20px;
  }
</style>
